<template>
  <div v-if="zhiwei" class="cityboxs">
    <div @click="getzhiwei" class="top">
    </div>
    <div  class="bottom">
        <span @click="getzhiwei" >取消</span>
  <div class="demo-picker-container">
  <mu-slide-picker :slots="addressSlots" :visible-item-count="7" @change="addressChange" :values="address"></mu-slide-picker>
  <p>
    <!-- 您选择的城市是： {{addressProvince}} {{addressCity}} -->
  </p>
   
</div>
 <span @click="sure">确认</span>
    </div>

</div>
</template>

<script>
const address = {
  '内科': ['综合内科','消化内科专业', '内分泌及免疫', '血液内科专业', '呼吸内科专业', '神经内科专业', '肾脏内科', '心/脑血管内科', '变态反应科\过敏科', '老年病科', '传染病科\感染性疾病科', '肿瘤内科', '传染病科', ],
  '外科': ['神经外科', '普外科', '手足外科', '胸外科', '泌尿外科', '肝胆外科', '骨科', '器官移植科', '烧伤整形科', '心/脑血管外科', '肛肠外科', '小儿外科', '肿瘤外科', '疼痛科', '甲状腺外科', '乳腺外科'],
  '儿科': ['新生儿科', '小儿外科', '小儿五官科', '儿童保健科'],
  '妇产科': ['妇科医生', '产科', '不孕不育\辅助生殖科', '计划生育科', '遗传咨询科', '妇幼保健科'],
  '五官口腔科': ['口腔科', '眼科', '五官科', '耳鼻喉科'],
  '精神科': ['精神科', '心理医生'],
  '中医': ['中医综合', '康复科', '针灸科推拿科', '中医外科', '中医妇产科', '中医儿科专业', '中医皮肤科专业', '中医眼科', '中医耳鼻喉科', '中医口腔科'],
}
import { mapState,mapMutations } from 'vuex'
export default {
  data () {
    return {
      addressSlots: [
        {
          width: '100%',
          textAlign: 'right',
          values: Object.keys(address)
        }, {
          width: '100%',
          textAlign: 'left',
          values: ['内科']
        }
      ],
      address: ['内科', '综合内科'],
      addressProvince: '内科',
      addressCity: '综合内科'
    }
  },
  computed:{
      ...mapState(["zhiwei"])
  },
  methods: {
    addressChange (value, index) {
      switch (index) {
        case 0:
          this.addressProvince = value
          const arr = address[value]
          this.addressSlots[1].values = arr
          this.addressCity = arr[0]
          break
        case 1:
          this.addressCity = value
          break
      }
      this.address = [this.addressProvince, this.addressCity]
     
    },
    // cencel(){
    //     this.cityboxs=false
    // }
...mapMutations(["fn5"]),
        getzhiwei(){
           this.fn5()
        },
        sure(){
           
           let zhiwei=this.address[1]
            this.$store.commit("fn6",zhiwei)
            this.$store.commit("fn5")
        }
  }
}
</script>

<style lang="css" scoped>
.demo-picker-container{
  width: 256px;

}
.cityboxs{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    
}
.top{
    width: 100%;
    flex: 1;
    background-color: rgba(0,0,0,.5);
}
.bottom{
    width: 100%;
    max-height: 5rem;
    display: flex;
    justify-content: flex-start;
    background-color: white;

}
.bottom>span{
    text-align: center;
    line-height: .8rem;
    font-size: .3rem;
    font-weight: 500;
    flex: 1;
    width: 100%;
    height: .8rem;
}
</style>